<template>
  <div class="relative">
    <BasicTable @register="registerTable"></BasicTable>
    <EditVpcInfo ref="modelRef"></EditVpcInfo>
  </div>
</template>

<script lang="ts" setup>
/* eslint-disable no-use-before-define*/
import BasicTable from '/@/components/BasicTable/BasicTable.vue';
import { useBasicTable } from '/@/components/BasicTable/hooks/useBasicTable';
import { ref } from 'vue';
import EditVpcInfo from '/@/views/system-mgmt/vpc-mgmt/editVpcInfo.vue';

const props = defineProps({
  columns: Array,
  function: Function,
});

const modelRef = ref();

const [registerTable, { reload }] = useBasicTable({
  api: props.function,
  columns: props.columns,
  immediate: true,
  useSearchForm: false,
  usePagination: true,
  actionColumns: [
    {
      name: '编辑',
      click: handleEdit,
      props: {
        style: { color: '#447b9c', fontWeight: 'bolder', backgroundColor: '' },
      },
    },
  ],
});

function handleEdit(record: Recordable) {
  modelRef.value.showModal(record, true);
  reload();
}
</script>
